<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>表达式和运算符 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/43.62f328ea.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Javascipt</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/js/01-认识javaScript.html" class="sidebar-link">01-认识javaScript</a></li><li><a href="/./guide/notes/js/02-变量与数据类型介绍.html" class="sidebar-link">02-变量与数据类型介绍</a></li><li><a href="/./guide/notes/js/03-基础dom操作.html" class="sidebar-link">03-基础dom操作</a></li><li><a href="/./guide/notes/js/04-表达式和操作符.html" class="active sidebar-link">04-表达式和操作符</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#运算符的分类" class="sidebar-link">运算符的分类</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#表达式种类" class="sidebar-link">表达式种类</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#算数表达式" class="sidebar-link">算数表达式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#赋值表达式" class="sidebar-link">赋值表达式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#关系表达式" class="sidebar-link">关系表达式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#逻辑表达式" class="sidebar-link">逻辑表达式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#综合表达式" class="sidebar-link">综合表达式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/04-表达式和操作符.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/./guide/notes/js/05-判断.html" class="sidebar-link">05-判断</a></li><li><a href="/./guide/notes/js/06-循环.html" class="sidebar-link">06-循环</a></li><li><a href="/./guide/notes/js/07-算法拓展.html" class="sidebar-link">07-算法拓展</a></li><li><a href="/./guide/notes/js/08-函数.html" class="sidebar-link">08-函数</a></li><li><a href="/./guide/notes/js/09-作用域,闭包,预解析.html" class="sidebar-link">09-作用域,闭包,预解析</a></li><li><a href="/./guide/notes/js/10-数组.html" class="sidebar-link">10-数组</a></li><li><a href="/./guide/notes/js/11-字符串.html" class="sidebar-link">11-字符串</a></li><li><a href="/./guide/notes/js/12-类型转换.html" class="sidebar-link">12-类型转换</a></li><li><a href="/./guide/notes/js/13-DOM进阶.html" class="sidebar-link">13-DOM进阶</a></li><li><a href="/./guide/notes/js/14-dom事件与机制.html" class="sidebar-link">14-dom事件与机制</a></li><li><a href="/./guide/notes/js/15-浏览器M操作.html" class="sidebar-link">15-浏览器M操作</a></li><li><a href="/./guide/notes/js/16-toProject.html" class="sidebar-link">16-toProject</a></li><li><a href="/./guide/notes/js/17-内置数学和时间project.html" class="sidebar-link">17-内置数学和时间project</a></li><li><a href="/./guide/notes/js/18-各种距离宽高获取.html" class="sidebar-link">18-各种距离宽高获取</a></li><li><a href="/./guide/notes/js/19-正则表达式.html" class="sidebar-link">19-正则表达式</a></li><li><a href="/./guide/notes/js/21-箭头函数.html" class="sidebar-link">20箭头函数</a></li><li><a href="/./guide/notes/js/22-解构赋值.html" class="sidebar-link">21-解构赋值</a></li><li><a href="/./guide/notes/js/23-project字面量增强和函数默认参数.html" class="sidebar-link">22-project字面量增强和函数默认参数</a></li><li><a href="/./guide/notes/js/24-剩余参数和展开运算符.html" class="sidebar-link">23-剩余参数和展开运算符</a></li><li><a href="/./guide/notes/js/25-Set 和 Map数据结构和Symbol.html" class="sidebar-link">24-Set 和 Map数据结构和Symbol</a></li><li><a href="/./guide/notes/js/26-遍历器和for-of循环.html" class="sidebar-link">25-遍历器和for-of循环</a></li><li><a href="/./guide/notes/js/27-Promise.html" class="sidebar-link">26-Promise</a></li><li><a href="/./guide/notes/js/28-Clsss类.html" class="sidebar-link">27-Clsss类</a></li><li><a href="/./guide/notes/js/29-module模块.html" class="sidebar-link">28-module模块</a></li><li><a href="/./guide/notes/js/30-Babel.html" class="sidebar-link">29-Babel</a></li><li><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html" class="sidebar-link">30-前后端通信和HTTP协议</a></li><li><a href="/./guide/notes/js/32-本地存储.html" class="sidebar-link">31-本地存储</a></li><li><a href="/./guide/notes/js/33-ajax.html" class="sidebar-link">32-ajax</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="表达式和运算符"><a href="#表达式和运算符" class="header-anchor">#</a> 表达式和运算符</h1> <h2 id="运算符的分类"><a href="#运算符的分类" class="header-anchor">#</a> 运算符的分类</h2> <blockquote><p>1、算数操作符</p> <p>2、逻辑操作符</p> <p>3、赋值操作符</p> <p>4、比较操作符</p> <p>5、三元操作符</p></blockquote> <p><strong>什么是表达式?</strong></p> <blockquote><p>将同类型的数据(如常量、变量、函数等) , 用运算符号按一定的规则连接起来的、有意义的式子称为表达式</p> <p>每种表达式有不同的运算符</p></blockquote> <p><img src="https://s1.ax1x.com/2020/09/11/wtH3vD.png" alt="wtH3vD.png"></p> <p><img src="https://s1.ax1x.com/2020/09/11/wtH08f.png" alt="wtH08f.png"></p> <h2 id="表达式种类"><a href="#表达式种类" class="header-anchor">#</a> 表达式种类</h2> <p><img src="https://s1.ax1x.com/2020/09/11/wtH5xU.png" alt="wtH5xU.png"></p> <h2 id="算数表达式"><a href="#算数表达式" class="header-anchor">#</a> 算数表达式</h2> <blockquote><p><strong>算数运算符</strong></p> <p><strong>加                      +</strong></p> <p><strong>减                       -</strong></p> <p>**乘                      ***</p> <p><strong>除                       /</strong></p> <p><strong>取余                  %</strong></p> <p>加减的符号和数学一致，乘法是*号，除法是/号</p> <p>优先级与数学中优先级相同  先乘除后加减</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token operator">+</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//6</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//减</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">*</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//乘</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//除</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p>默认情况下，<strong>乘除法的优先级要高于加法和减法</strong>;必要时可以使用<strong>圆括号</strong>来<strong>改变运算的顺序</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//7</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//9</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//1.5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//6.5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="字符串拼接"><a href="#字符串拼接" class="header-anchor">#</a> 字符串拼接</h3> <blockquote><p><strong>加号</strong>有“加法”和“连字符”<strong>两种作用</strong></p> <p>如果加号两边的操作数都是数字，则为“加法”，否则为连字符</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;云牧&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">&quot;黛玉&quot;</span>
<span class="token comment">// +号两边任意一边出现字符串,那么为拼接功能,最终得到字符串 </span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;a&quot;</span> <span class="token operator">+</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//字符串ab</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">+</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//云牧b</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;10&quot;</span> <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//1010</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">20</span> <span class="token operator">+</span> <span class="token string">&quot;20&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2020</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">30</span> <span class="token operator">+</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token string">&quot;3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//403</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span> <span class="token operator">+</span> <span class="token number">30</span> <span class="token operator">+</span> <span class="token number">10</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//33010</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">30</span> <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//340</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><strong>应用</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//比如经过一系列运算得来的变量</span>

<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">;</span>

xxx<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> c <span class="token operator">+</span> <span class="token string">&quot;px&quot;</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="加法的特殊性"><a href="#加法的特殊性" class="header-anchor">#</a> 加法的特殊性</h3> <ul><li><strong>当一侧为<code>String</code>类型，被识别为字符串拼接，并会优先将另一侧转换为字符串类型。</strong></li> <li><strong>当一侧为<code>Number</code>类型，另一侧为原始类型，则将原始类型转换为<code>Number</code>类型。</strong></li> <li><strong>当一侧为<code>Number</code>类型，另一侧为引用类型，将引用类型和<code>Number</code>类型转换成字符串后拼接。</strong></li> <li><strong>以上 3 点，优先级从高到低，即 <code>3+'abc'</code> 会应用规则 1，而 <code>3+true</code>会应用规则2。</strong></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 布尔值与数字运算的时候会 首先把 true 转换为数字 1， 然后执行 1 + 1    </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//首先把 null 转换为数字 0， 然后执行 0 + 1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">+</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">+</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">false</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//3</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">+</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//NaN  </span>
<span class="token comment">//无论哪种运算，只要出现了undefined参与运算，结果都是NaN。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//这样的加法没有什么意义,了解一下即可</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>%:取余</strong></p> <blockquote><p><strong>取余运算也叫作“求模运算”，用百分号%表示</strong></p> <p><strong>a % b 表示求a除以b的余数，它不关心整数部分，只关心余数</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">8</span> <span class="token operator">%</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">//3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">24</span> <span class="token operator">%</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">//4    模   去余数</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">31.5</span> <span class="token operator">%</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//1.5 小数不参与模运算</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span> <span class="token operator">%</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">//0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">%</span> <span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">//3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">%</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">//2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p><strong>除了加法</strong></p> <p><strong>我们在使用  - * /  如果两边运算不是数字,转换数字去运算(隐式类型转换)</strong></p> <p><strong>会先将非<code>Number</code>类型转换为<code>Number</code>类型。</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;100&quot;</span> <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//90</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;云牧&quot;</span> <span class="token operator">-</span> <span class="token string">&quot;黛玉&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//NaN(not a number)</span>
 <span class="token comment">// NaN不是一个数字,但它是一个数字类型</span>
 <span class="token comment">// 一般在做一些非法的运算会出现NaN  </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span> <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//1  </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span> <span class="token operator">-</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//1  </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span> <span class="token operator">-</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//1  </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;4&quot;</span> <span class="token operator">*</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;4&quot;</span> <span class="token operator">*</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;4&quot;</span> <span class="token operator">/</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;4&quot;</span> <span class="token operator">%</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//0</span>
  
<span class="token comment">// 不纯的字符串和undefined是不能帮你进行隐式转换的，结果都是NaN, 没办法计算</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">*</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//NaN  //数学运算中，undefined不能进行隐式转换  </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">*</span> <span class="token string">&quot;2天&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">//NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;云牧&quot;</span> <span class="token operator">%</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">//NaN</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="有关ieee754"><a href="#有关ieee754" class="header-anchor">#</a> 有关IEEE754</h3> <p>在JavaScript中有些小数运算产生“丢失精度”问题</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token punctuation">;</span> <span class="token comment">//.30000000000000004</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>JavaScript使用了IEEE754二进制浮点数算术标准，这会使个别小数运算产生丢失精度的问题</p> <p><strong>解决办法</strong></p> <p>在进行小数运算时，要调用数字的toFixed()方法,保留指定的小数位数.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>  <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//保留两位  可以使用Number转一下</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="赋值表达式"><a href="#赋值表达式" class="header-anchor">#</a> 赋值表达式</h2> <blockquote><p><strong>赋值运算符</strong></p> <p>简单赋值: =</p> <p>复合赋值: +=、-=、*=、/=、%=</p> <p>自增 ++</p> <p>自减 --</p> <p><strong>JS中，-表示赋值，==判断是否相等（不判断类型),===判断是否全等</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 在定义变量的时候 只能使用 = 赋值 赋值运算符会将等号右边的数值，赋予等号左边的变量</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

<span class="token comment">//赋值元素也输出值</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//4  变量a既能输出4  也能给a赋值  这个赋值语句有返回值 返回值就是等号右边的</span>

<span class="token comment">//这就意味着可以连续使用赋值运算符</span>
<span class="token keyword">let</span> a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">;</span>
a <span class="token operator">=</span> b <span class="token operator">=</span> c <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//15</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//15</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//15</span>

<span class="token comment">//公司一般不允许使用 只出现在面试题中</span>


<span class="token comment">//在重新赋值的有很多的赋值符号可以选择   快捷赋值在原数值基础上进一步运算</span>
a <span class="token operator">+=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">//a = a + 5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>a <span class="token operator">+=</span> <span class="token string">&quot;5&quot;</span><span class="token punctuation">;</span> <span class="token comment">//105</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>a <span class="token operator">-=</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token comment">//a = a - 3</span>
a <span class="token operator">*=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">//a = a * 2</span>
a <span class="token operator">/=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">//a = a / 2</span>
a <span class="token operator">%=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">//a = a % 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>关于模的小案例(三个颜色循环切换)</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
      <span class="token selector">#btn</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid green<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
        <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
        <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
        <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token property">transition</span><span class="token punctuation">:</span> 0.8s<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token selector">#btn.pink</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token selector">#btn.green</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token selector">#btn.purple</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        
        <span class="token comment">//获取</span>
      <span class="token keyword">let</span> oBtn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        
        <span class="token comment">//先存储所有名字</span>
      <span class="token keyword">let</span> colorArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;pink&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;green&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;purple&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
	
        <span class="token comment">//最开始使用哪一个</span>
      <span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

      oBtn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>className <span class="token operator">=</span> colorArr<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>

        index <span class="token operator">=</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">3</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div><h3 id="前置自增和后置自增"><a href="#前置自增和后置自增" class="header-anchor">#</a> 前置自增和后置自增</h3> <blockquote><p>前置 ++a 与 后置a++都是对a进行递增的操作,</p> <p><strong>两者使变量最终的结果一样</strong></p> <p><strong>但是 过程(参与了其他表达式) 不一样</strong></p> <p>​         前置 : 先 赋值 再 +1</p> <p>​        后置 : 先 +1 再赋值</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
num1<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token comment">//++num1;效果一样   类似于a=a+1  a+=1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>自带类型转换</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token string">&quot;5&quot;</span><span class="token punctuation">;</span>
num1 <span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">//6</span>
num1 <span class="token operator">+=</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//51</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token string">&quot;5&quot;</span><span class="token punctuation">;</span>
num1 <span class="token operator">++</span><span class="token punctuation">;</span><span class="token comment">//51</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>前置++ 和 后置++的区别</strong></p> <blockquote><p><strong>参与了其他表达式</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> num2 <span class="token operator">=</span> num1<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">// let num2 = num1; num1 = num1+1;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//11  </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//10</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> num2 <span class="token operator">=</span>  <span class="token operator">++</span>num1<span class="token punctuation">;</span> <span class="token comment">// num1 = num1 + 1; let num2 = num1;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//11  </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//11</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>小练习</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> num2 <span class="token operator">=</span> num1<span class="token operator">++</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//11</span>
num2 <span class="token operator">=</span> <span class="token operator">++</span>num1 <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//13</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token number">6</span>
<span class="token keyword">let</span> num2 <span class="token operator">=</span> num1<span class="token operator">++</span> <span class="token operator">+</span> <span class="token operator">++</span>num1 <span class="token operator">+</span> <span class="token number">3</span> <span class="token operator">+</span> num1<span class="token operator">++</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//9</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//25</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>JS中的数学运算符就这么几个,如果我想算n次幂怎么办？像这样 4的三次方</p> <p>那我们就先学一个API,</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//64</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这是一个新的API，记住就行了，后面的课程将会告诉你，Math是一个内置对象，pow是它的一个方法。</p> <p>Math就是数学，pow就是power乘方。</p> <p><strong>开根号</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">81</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//9</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>例子:</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="关系表达式"><a href="#关系表达式" class="header-anchor">#</a> 关系表达式</h2> <blockquote><p><strong>关系运算符</strong></p> <p><strong>&gt; 、&lt;、&gt;=、&lt;=、==、===、!=、! ==</strong></p> <p><strong>大于 &gt; , 小于 &lt; 两个符号和数学相同</strong></p> <p><strong>大于等于运算符是 &gt;=，小于等于运算符是 &lt;=</strong></p> <p>== 相等，只比较值是否相等</p> <p>=== 全等，比较值的同时比较数据类型是否相等</p> <p>!= 不相等，比较值是否不相等</p> <p>!== 不全等，比较值的同时比较数据类型是否不相</p> <p>​      返回值: <strong>boolean型</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token number">8</span> <span class="token operator">&gt;=</span> <span class="token number">8</span> <span class="token punctuation">)</span> <span class="token comment">//true    &gt;=表示或者  8&gt;8或者8=8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token number">8</span> <span class="token operator">&lt;=</span> <span class="token number">8</span> <span class="token punctuation">)</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">&gt;</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//--&gt;只会返回布尔值</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">&lt;</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">&gt;=</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">&lt;=</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token operator">==</span> b <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//等于</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token operator">!=</span> b <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//不等于</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>如果想比较两个值是否相等，此时应该使用==运算符</p> <p><strong>JavaScript中等号=表示赋值，而并不是相等。判断相等应该使用==运算符</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">==</span> <span class="token number">3</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token number">3</span> <span class="token operator">===</span> <span class="token number">3</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token number">3</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//错误语句</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>等于和全等的区别</strong></p> <blockquote><p><strong>两个等号 == 运算符不比较值的类型，它会进行隐式转换后比较值是否相等</strong></p> <p><strong>三个等号 === 运算符，不仅比较值是否相同，也比较类型是否相同</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;10&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token comment">// 等于 只要求值一样,数据类型不一样也没事</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator">==</span> b <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>

<span class="token comment">//全等于  要求数据类型和值都一样</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator">===</span> b <span class="token punctuation">)</span> <span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li><strong>没有特殊要求，任何时候都使用全等</strong></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//false</span>


<span class="token comment">//基础数据类型的NaN  连自己都不相等</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">NaN</span> <span class="token operator">==</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">NaN</span> <span class="token operator">===</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p><strong>复杂数据类型在进行比较时，只比较地址是否一致，不进行值比较</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;黛玉&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> d <span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;黛玉&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">===</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c <span class="token operator">===</span> d<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&quot;云牧&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">===</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>不相等和不全等</strong></p> <blockquote><p>!=表示不相等，!==表示不全等</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token number">5</span> <span class="token operator">!=</span> <span class="token number">6</span><span class="token punctuation">;</span>   <span class="token comment">// true</span>
<span class="token number">5</span> <span class="token operator">!==</span> <span class="token number">6</span><span class="token punctuation">;</span>  <span class="token comment">//true</span>

<span class="token number">5</span> <span class="token operator">!=</span> <span class="token string">'5'</span><span class="token punctuation">;</span> <span class="token comment">//false</span>
<span class="token number">5</span> <span class="token operator">!==</span> <span class="token string">'5'</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>连续判断(连比)</strong></p> <blockquote><p>js 中没有数学中的连不等式，会将连不等式分步处理</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token number">3</span> <span class="token operator">&lt;</span> num <span class="token operator">&lt;</span> <span class="token number">6</span> <span class="token punctuation">)</span>    <span class="token comment">// true</span>

<span class="token comment">//执行过程 :</span>
<span class="token number">3</span> <span class="token operator">&lt;</span> num <span class="token operator">&lt;</span> <span class="token number">6</span> 
<span class="token number">3</span> <span class="token operator">&lt;</span> num    <span class="token operator">===</span><span class="token operator">&gt;</span>    <span class="token boolean">true</span>
<span class="token boolean">true</span> <span class="token operator">&lt;</span> <span class="token number">6</span>    <span class="token operator">===</span><span class="token operator">&gt;</span>   <span class="token number">1</span> <span class="token operator">&lt;</span> <span class="token number">6</span>   <span class="token operator">===</span><span class="token operator">&gt;</span>     <span class="token boolean">true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="字符串的比较"><a href="#字符串的比较" class="header-anchor">#</a> 字符串的比较</h3> <blockquote><p>字符串在进行比较时，强制将字符串的 第一个字符 转换为 ASCII码 , 进行比较</p> <p>常用 ASCII 码：</p> <ul><li>0-9  48-57</li> <li>a-z   97-122</li> <li>A-Z  65-90</li></ul></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">&quot;ab&quot;</span> <span class="token operator">&lt;</span> <span class="token string">&quot;ba&quot;</span> <span class="token punctuation">)</span>   <span class="token comment">// true</span>

<span class="token comment">// 比较 a 和 b 的ASCII码, 即 97 &lt; 98 为 true  </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">&quot;30&quot;</span> <span class="token operator">&gt;</span> <span class="token string">&quot;4&quot;</span> <span class="token punctuation">)</span>   <span class="token comment">//false</span>

<span class="token comment">// 比较 3 和 4 的ASCII码，即 3 &gt; 4  为 false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="逻辑表达式"><a href="#逻辑表达式" class="header-anchor">#</a> 逻辑表达式</h2> <blockquote><p><strong>逻辑运算符</strong></p> <p><strong>&amp;&amp; 与 并且</strong></p> <p>​        遇假则停取值  (只要有一个条件不成立,返回false )</p> <p><strong>|| 或 或者</strong></p> <p>​        遇真则停取值</p> <p><strong>! 非 取反</strong></p> <p>​        一定会得到布尔值</p></blockquote> <p>**&amp;&amp;两边都为真 才是真  口诀:都真才真  否则都是假 **</p> <blockquote><p><strong>例子</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">命题1</span><span class="token punctuation">:</span> <span class="token string">&quot;地球是个圆的&quot;</span> 真的

<span class="token property">命题2</span><span class="token punctuation">:</span> <span class="token string">&quot;云牧超帅&quot;</span> 真的

命题1 且 命题2 真
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>命题1：“1+1=3” 假的

命题2：“地球是方的” 假的

命题1 且 命题2 假的
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//布尔值的逻辑运算</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> z <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> t <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>||两边都假 否则都真</strong></p> <blockquote><p><strong>例子</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>命题1： 1 + 1 = 2 真的

命题2：“你很帅” 存在歧义

命题1 或者 命题2 总结果是真
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> z <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> t <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token operator">||</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span> <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>!取反</strong></p> <blockquote><p>！取反运算符是一个感叹号，用于将布尔值变为相反值，即true变成false，false变成true。</p> <p>对于非布尔值，取反运算符会将其转为布尔值。</p> <p><strong>如果对一个值连续做两次取反运算，等于将其转为对应的布尔值，与Boolean函数的作用相同</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token operator">!</span><span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token operator">!</span><span class="token boolean">false</span><span class="token punctuation">;</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token boolean">false</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">!</span><span class="token number">0</span> <span class="token comment">//true</span>
<span class="token operator">!</span><span class="token keyword">undefined</span> <span class="token comment">//true</span>
<span class="token operator">!</span><span class="token string">''</span> <span class="token comment">//true</span>
<span class="token operator">!</span> <span class="token string">' imooc'</span> <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>逻辑运算会按照两个数据对应的布尔值去运算</strong></p> <blockquote><p>JavaScript 每个数据 在做真假判断的时候都有自身对应的布尔值</p> <p>哪些数据转换成布尔值的时候是ture?</p> <p><strong>哪些数据转换成布尔值的时候是false?</strong></p> <p>false</p> <p>0</p> <p>undefined</p> <p>null</p> <p>&quot;&quot;</p> <p>NaN</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token string">&quot;0&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true  空字符串中带空格也为true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token string">&quot;false&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token string">&quot;null&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>说明:两个操作数的情况,在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回布尔值,此时它遵循下列规则:</p> <ul><li><strong>1、如果第一个操作数隐式类型转换后为true ,则返回第二个操作数。</strong></li> <li><strong>2、如果第一个操作数隐式类型转换后为false ,则返回第一个操作数。</strong></li></ul> <p><strong>逻辑与短路运算</strong></p> <blockquote><p>计算运算且运算的时候，</p> <p>比如a &amp;&amp; b，a如果就是一个false，</p> <p>那么就不会管b是什么，直接输出false就行了，等于说直接输出a。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//从布尔值的结果推断程序要不要往后走  后面对程序真假有影响就会往下走</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">;</span>  

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> <span class="token number">1</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">20</span> <span class="token operator">*</span> <span class="token string">&quot;abc&quot;</span> <span class="token operator">&amp;&amp;</span> num1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//NaN</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//后面结果已经没有</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>逻辑或的短路运算</strong></p> <blockquote><p>|| 逻辑或的短路也是类似的，a||b</p> <p>计算机发现a是真，那么返回a；如果a是假，返回b</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token string">&quot;10&quot;</span> <span class="token operator">||</span> <span class="token number">5</span><span class="token punctuation">;</span>  <span class="token comment">//前面真，扔前面</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//10</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">5</span> <span class="token operator">||</span> <span class="token keyword">undefined</span>  
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span><span class="token keyword">undefined</span> <span class="token operator">||</span> <span class="token number">5</span>  <span class="token comment">//前面假，扔后面</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">||</span><span class="token keyword">null</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//null  前面假，扔后面</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token number">3</span> <span class="token operator">&amp;&amp;</span> <span class="token number">6</span>  <span class="token comment">//6</span>
<span class="token keyword">undefined</span> <span class="token operator">&amp;&amp;</span> <span class="token number">15</span>  <span class="token comment">//undefined</span>
<span class="token number">15</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">undefined</span>  <span class="token comment">//undefined</span>
nul1 <span class="token operator">&amp;&amp;</span> <span class="token number">2</span>    <span class="token comment">//null</span>
<span class="token string">''</span><span class="token operator">&amp;&amp;</span> <span class="token number">16</span>   <span class="token comment">//&quot;&quot;</span>
<span class="token number">NaN</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">undefined</span> <span class="token comment">//&quot;NaN&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>使用逻辑运算符控制流程</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

a <span class="token operator">||</span>  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//遇真停止取值</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">yun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

a <span class="token operator">&amp;&amp;</span> <span class="token function">yun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//前面为真 运行后面的</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> yun <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>

yun <span class="token operator">&amp;&amp;</span> <span class="token function">yun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//如果没值不报错 有值返回函数执行</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>逻辑运算顺序</strong></p> <blockquote><p><strong>逻辑运算的优先级是:非→与→或</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">!</span><span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">false</span>  <span class="token comment">// false</span>

<span class="token number">3</span> <span class="token operator">&amp;&amp;</span> <span class="token number">4</span> <span class="token operator">||</span> <span class="token number">5</span> <span class="token operator">&amp;&amp;</span> <span class="token number">6</span>   <span class="token comment">//4   //先运算逻辑与 再运算逻辑或</span>

<span class="token number">2</span> <span class="token operator">&amp;&amp;</span> <span class="token number">1</span> <span class="token operator">||</span> <span class="token number">5</span>  <span class="token punctuation">;</span>

<span class="token number">5</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> <span class="token number">9</span><span class="token comment">//0</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="综合表达式"><a href="#综合表达式" class="header-anchor">#</a> 综合表达式</h2> <p><strong>运算优先级</strong></p> <p>参考资料 ： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence</p> <p><strong>运算顺序:非运算→数学运算→关系运算→逻辑运算</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token number">4</span> <span class="token operator">-</span> <span class="token number">2</span> <span class="token comment">//7</span>

<span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">*</span><span class="token punctuation">(</span><span class="token number">4</span> <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">//5</span>

<span class="token number">5</span> <span class="token operator">&lt;</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">3</span>  <span class="token comment">//true   3+3是数学运算  &lt;是关系运算</span>

<span class="token number">3</span> <span class="token operator">&gt;</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> <span class="token number">8</span> <span class="token operator">&gt;</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">4</span>  <span class="token comment">// true     3+4先运算</span>

<span class="token number">3</span> <span class="token operator">&gt;</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> <span class="token number">8</span> <span class="token operator">&gt;</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">5</span>  <span class="token comment">// false       3+5先运算</span>

<span class="token operator">!</span><span class="token number">13</span> <span class="token operator">&lt;</span> <span class="token number">5</span> <span class="token operator">-</span> <span class="token number">3</span>  <span class="token comment">//true      !13先运算  转为false  --&gt; false &lt; 2</span>

<span class="token operator">!</span><span class="token number">13</span> <span class="token operator">&lt;</span> <span class="token number">5</span> <span class="token operator">-</span> <span class="token number">5</span>  <span class="token comment">//true       !13先运算  转为false  --&gt; false &lt; 0    </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><strong>验证变量a是否介于5到12之间</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token number">5</span> <span class="token operator">&lt;=</span> a <span class="token operator">&lt;=</span> <span class="token number">12</span> <span class="token comment">// 错误</span>

a <span class="token operator">&gt;=</span> <span class="token number">5</span> <span class="token operator">&amp;&amp;</span> a <span class="token operator">&lt;=</span> <span class="token number">12</span> <span class="token comment">//正确</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>闰年判断</strong></p> <p>公历闰年的简单计算方法（<strong>符合以下条件之一即可</strong>）</p> <blockquote><p>1．<strong>能被4整除且不能被100整除。</strong></p> <p>2．<strong>能被100整除也能被400整除。</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token number">1892</span>年  <span class="token comment">// 是</span>
<span class="token number">1896</span>年  <span class="token comment">// 是</span>
<span class="token number">1900</span>年  <span class="token comment">// 不是</span>
<span class="token number">1904</span>年  <span class="token comment">// 是</span>
<span class="token number">1992</span>年  <span class="token comment">// 是</span>
<span class="token number">1996</span>年  <span class="token comment">// 是</span>
<span class="token number">2000</span>年  <span class="token comment">// 是</span>
<span class="token number">2004</span>年  <span class="token comment">// 是</span>

<span class="token comment">//闰年每四年一闰  逢00结尾还必须能被400整除</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//要让用户输入一个年份</span>
<span class="token keyword">let</span> year <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">&quot;请输入年份&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 根据两个条件进行判断</span>
<span class="token comment">// ①  能被4整除,且不能被100整除</span>
<span class="token comment">// ②  能被100整除,且能被400整除</span>

<span class="token function">alert</span><span class="token punctuation">(</span> year <span class="token operator">%</span> <span class="token number">4</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> year <span class="token operator">%</span> <span class="token number">100</span> <span class="token operator">!=</span> <span class="token number">0</span> <span class="token operator">||</span> year <span class="token operator">%</span> <span class="token number">100</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> year <span class="token operator">%</span> <span class="token number">400</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>特殊情况 ：</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token number">2</span> <span class="token operator">||</span> <span class="token number">10</span> <span class="token operator">&amp;&amp;</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span>    <span class="token comment">//  2  </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>以上代码<strong>不会弹窗</strong> ， 虽然 &amp;&amp; 的优先级大于 || ， 但计算机的解析原理是惰性的,从优先级最低的符号看有没有必要执行， 此处 || 运算符后面的代码不管是什么 ， 最后返回的值都是 2 ，所以 || 右边的内容不被执行</p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <h3 id="_1-表达式有哪几种-每种表达式分别有哪些运算符"><a href="#_1-表达式有哪几种-每种表达式分别有哪些运算符" class="header-anchor">#</a> 1.表达式有哪几种?每种表达式分别有哪些运算符?</h3> <blockquote><p><strong>算数运算符</strong></p> <p>加 +     减 -    乘 *   除 /  取余%</p> <p><strong>关系运算符</strong></p> <p>大于 &gt;    小于&lt;      大于或等于&gt;=       小于或等于&lt;=    等于 ==    不等于!=   全等于===   不全等于!==</p> <p><strong>逻辑运算符</strong></p> <p>非!        与&amp;&amp;     或||</p> <p><strong>赋值运算符</strong></p> <p>赋值 =       快捷赋值 +=   -=   *=   /=   %=               自增运算 ++     自减运算--</p></blockquote> <h3 id="_2-每种表达式中运算顺序是什么-综合运算顺序是什么"><a href="#_2-每种表达式中运算顺序是什么-综合运算顺序是什么" class="header-anchor">#</a> 2.每种表达式中运算顺序是什么?综合运算顺序是什么?</h3> <blockquote><p><strong>算数运算符    先算乘除取余   再算加减</strong>  如果需要改变运算顺序 写圆括号</p> <p><strong>关系运算符  运算顺序相同</strong></p> <p><strong>逻辑运算符   运算顺序   非! &gt;  与&amp;&amp;  &gt; 或||</strong></p> <p><strong>赋值运算符  先自增和自减 因为是单目运算  然后进行其他普通赋值运算</strong></p></blockquote> <h3 id="_3-难点"><a href="#_3-难点" class="header-anchor">#</a> 3.难点</h3> <h4 id="什么是短路计算-3-13的结果是多少-3-13呢"><a href="#什么是短路计算-3-13的结果是多少-3-13呢" class="header-anchor">#</a> 什么是短路计算? 3 &amp;&amp;13的结果是多少? 3 ||13呢?</h4> <h4 id="a-和-a的区别"><a href="#a-和-a的区别" class="header-anchor">#</a> a++  和 ++a的区别？</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> 
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token operator">++</span> <span class="token operator">+</span> b<span class="token operator">++</span> <span class="token operator">+</span> <span class="token operator">++</span>a <span class="token operator">+</span> <span class="token operator">++</span>b<span class="token punctuation">)</span> <span class="token comment">//18   </span>
<span class="token comment">//先执行到a++操作  当执行到++a时 a的值已经变成了4  而++a先自增，再进行计算  所以a变成5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/js/03-基础dom操作.html" class="prev">
        03-基础dom操作
      </a></span> <span class="next"><a href="/./guide/notes/js/05-判断.html">
        05-判断
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/43.62f328ea.js" defer></script>
  </body>
</html>
